<template>
<div class="box1">
  <div class="dialog">
      <qr-button @click="visible = true">打开对话框</qr-button>
      <qr-dialog width="25%" top="150px" :visible.sync="visible">
        <template v-slot:title>
          <h3>我是标题</h3>
        </template>
        <ul>
         <li>我是内容1</li>
         <li>我是内容2</li>
         <li>我是内容3</li>
        </ul>
        <template v-slot:footer>
          <qr-button>取消</qr-button>
          <qr-button type="prinary">确定</qr-button>
        </template>
      </qr-dialog>
  </div>
    <div class="show">
      <span @click='ShowMsg'>{{msg}}</span>
     <div class="markdown-body" v-show="isShow" >
       <dialog1-md></dialog1-md>
     </div>
   </div>
</div>
</template>

<script>
import Dialog1Md from '@/markdown/Dialog/Dailog1.md'
export default {
 name: 'Dialog1',
 data() {
   return {
     visible: false,
     isShow: true,
     msg: '隐藏代码'
   }
 },
 components: {
   Dialog1Md
 },
 methods: {
   ShowMsg() {
     this.isShow = !this.isShow;
     this.isShow == true ? this.msg = '隐藏代码' : this.msg = '显示代码'
   }
}
}
</script>

<style  scoped>
  .dialog {
     margin-top: 15px;
  }
  span {
     font-size: 14px;
     display: block;
     height: 50px;
     color:  #409eff ;
     margin-left: 300px;
     opacity: .7;
   }
   span:hover {
     color:  #409eff ;
     opacity: 1;
     cursor: pointer;
   }
   .markdown-body {
     font-size: 17px;
   }
   .box1 {
     width: 1000px;
     margin-top: 20px;
     border: 1px #ccc solid;
     border-radius: 5px;
     padding: 10px 20px;
     box-shadow: 7px 7px 7px -3px rgba(0, 0,0, .2);
   }
</style>
